.coupon {
  width: 100vw;
  min-height: 100vh;
  background-color: #FFDBDC;

  .rule {
    position: absolute;
    top: 90rpx;
    left: 0rpx;
    width: 158rpx;
    height: 48rpx;
    border-bottom-right-radius: 24rpx;
    border-top-right-radius: 24rpx;
    background: rgba(255, 255, 255, 0.5);
    z-index: 10;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
  }

  .coupon-banner {
    width: 750rpx;
    height: 810rpx;
    position: relative;
    overflow: hidden;

    .coupon-banner-image {
      width: 750rpx;
      height: 970rpx;
    }
  }

  .coupon-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    top: -110rpx;

    .coupon-item {
      width: 718rpx;
      height: 180rpx;
      margin-top: 40rpx;
      // border: 1px solid red;
      position: relative;

      .coupon-bg {
        width: 718rpx;
        height: 180rpx;
        position: absolute;
        top: 0;
        left: 0;
      }

      .coupon-text {
        width: 718rpx;
        height: 180rpx;
        position: relative;
        top: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .coupon-fecth {
          padding-left: 70rpx;
          width: 480rpx;
          // border: 1px solid red;
          height: 180rpx;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: flex-start;

          .cf-name {
            width: 100%;
            color: #9E6843;
            font-size: 48rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            .count {
              margin-left: 30rpx;
              font-size: 32rpx;
              display: flex;
              justify-content: center;
              align-items: center;

              .can {
                margin-right: 8rpx;
                font-size: 20rpx;
              }
            }
          }

          .income {
            width: 100%;
            font-size: 28rpx;
            display: flex;
            color: #9E6843;
            align-items: center;

            .per {
              color: #f75370;
              font-size: 24rpx;
              font-weight: bold;
              margin-left: 4rpx;
              margin-right: 4rpx;
            }
          }

          .zhu {
            width: 100%;
            font-size: 18rpx;
            // color: #9E6843;
            color: #f75370;
            display: flex;
            .user-list{
              display: flex;
              justify-content: flex-start;
             align-items: center;
             width: 250rpx;
             overflow-x: scroll;
              .avator{
                margin-left: 8rpx;
                width: 24rpx;
                height: 24rpx;
                border-radius: 100%;
                flex-shrink: 0;
              }
            }
          }
        }

        .coupon-status {
          width: 204rpx;
          height: 180rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          flex-direction: column;

          // padding-top: 20rpx;
          .btn {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24rpx;
            color: #fff;
            width: 102rpx;
            height: 102rpx;
            background-size: 100% 100%;
            background-image: url(.png);
            background-image: url(https://static.joymew.com/joymew-assist/pttq/main/not-btn.png);

            &.wait-btn {
              background-image: url(https://static.joymew.com/joymew-assist/pttq/main/wait-btn.png);
            }

            &.not-btn {
              background-image: url(https://static.joymew.com/joymew-assist/pttq/main/not-btn.png);

            }

            &.charge-btn {
              background-image: url(https://static.joymew.com/joymew-assist/pttq/main/charge-btn.png);

            }

            &.invite-btn {
              background-image: url(https://static.joymew.com/joymew-assist/pttq/main/invite-btn.png);
  animation: heart 1s linear infinite;

            }
          }

          .expiredate {
            position: absolute;
            // margin-top: 10rpx;
            bottom: 12rpx;
            width: 100%;
            text-align: center;

            font-size: 20rpx;
            color: #fff;

          }
        }
      }
    }
  }
}


.rule-mask {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.50);

  .rule-modal {
    width: 560rpx;
    height: 794rpx;
    background: #ffffff;
    border-radius: 32rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-top: 40rpx;
    display: flex;
    flex-direction: column;

    .title {
      font-size: 36rpx;
      color: #333;
      width: 100%;
      height: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .rule-text {
      width: 100%;
      height: 586rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      overflow-y: scroll;
      padding: 0 40rpx;
      color: #999;
      font-size: 28rpx;

      view {
        width: 100%;
        margin-top: 24rpx;
        line-height: 1.4;
      }
    }

    .sure {
      border-top: 2rpx solid #e0e0e0;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 112rpx;
      font-size: 40rpx;
      color: #F22121;
    }
  }

}

.successGet-mask {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.50);

  .sg-box {
    width: 560rpx;
    height: 718rpx;
    background-image: url(https://static.joymew.com/joymew-assist/pttq/tips/dialog1.png);
    background-size: 100%;
    position: absolute;
    top: calc( 50% - 718rpx / 2);
    left: calc(50% - 560rpx / 2);
    // translate(-50%, -50%) 

    transform: sacle(0);
    opacity: 0;
    padding-top: 200rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .close {
      position: absolute;
      top: 130rpx;
      right: 32rpx;
      width: 48rpx;
      height: 48rpx;
      // background-color: red;
    }

    .coupon-min {
      width: 536rpx;
      height: 134rpx;
      // border: 1px solid red;
    }

    .p1 {
      width: 100%;
      color: #333333;
      font-size: 36rpx;
      font-weight: 400;
      text-align: center;
      .sub{
        font-weight: 700;
        letter-spacing: 4rpx;
        color: #FC3A35;
      }
    }
    .p2{
      color: #666666;
      font-size: 28rpx;
    }
    .sure{
      background-image: url(https://static.joymew.com/joymew-assist/pttq/tips/sure.png);
      background-size: 100% 100%;
      width: 331rpx;
      height: 84rpx;
      font-size: 36rpx;
      color: #fefefe;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tips{
      color:#999999;
      font-size: 24rpx;
    }

  }
}

.successBuy-mask {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.50);

  .sg-box {
    width: 560rpx;
    height: 718rpx;
    background-image: url(https://static.joymew.com/joymew-assist/pttq/tips/dialog2.png);
    background-size: 100%;
    position: absolute;
    top: calc( 50% - 718rpx / 2);
    left: calc(50% - 560rpx / 2);
    // transform: translate(-50%, -50%);
    transform: scale(0,0);
    opacity: 0;
    padding-top: 200rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .close {
      position: absolute;
      top: 130rpx;
      right: 32rpx;
      width: 48rpx;
      height: 48rpx;
      // background-color: red;
    }

    .coupon-min {
      width: 536rpx;
      height: 134rpx;
      // border: 1px solid red;
    }

    .p1 {
      width: 100%;
      color: #333333;
      font-size: 36rpx;
      font-weight: 400;
      text-align: center;
      .sub{
        font-weight: 700;
        letter-spacing: 4rpx;
        color: #FC3A35;
      }
    }
    .p2{
      color: #666666;
      font-size: 28rpx;
    }
    .sure{
      background-image: url(https://static.joymew.com/joymew-assist/pttq/tips/sure.png);
      background-size: 100% 100%;
      width: 331rpx;
      height: 84rpx;
      font-size: 36rpx;
      color: #fefefe;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tips{
      color:#999999;
      font-size: 24rpx;
    }

  }
}



.successCheck-mask {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.50);

  .sg-box {
    width: 560rpx;
    height: 718rpx;
    background-image: url(https://static.joymew.com/joymew-assist/pttq/tips/dialog4.png);
    background-size: 100%;
    position: absolute;
    top: calc( 50% - 718rpx / 2);
    left: calc(50% - 560rpx / 2);
    // transform: translate(-50%, -50%);
    transform: scale(0,0);
    opacity: 0;
    padding-top: 200rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .close {
      position: absolute;
      top: 130rpx;
      right: 32rpx;
      width: 48rpx;
      height: 48rpx;
      // background-color: red;
    }

    .coupon-min {
      width: 536rpx;
      height: 134rpx;
      // border: 1px solid red;
    }

    .p1 {
      width: 100%;
      color: #333333;
      font-size: 36rpx;
      font-weight: 400;
      text-align: center;
      .sub{
        font-weight: 700;
        letter-spacing: 4rpx;
        color: #FC3A35;
      }
    }
    .p2{
      color: #666666;
      font-size: 28rpx;
    }
    .sure{
      background-image: url(https://static.joymew.com/joymew-assist/pttq/tips/sure.png);
      background-size: 100% 100%;
      width: 331rpx;
      height: 84rpx;
      font-size: 36rpx;
      color: #fefefe;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tips{
      color:#999999;
      font-size: 24rpx;
    }

  }
}

.waitUse-mask {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.50);

  .sg-box {
    width: 560rpx;
    height: 670rpx;
    background-image: url(https://static.joymew.com/joymew-assist/pttq/tips/dialog5.png);
    background-size: 100%;
    position: absolute;
    top: calc( 50% - 670rpx / 2);
    left: calc(50% - 560rpx / 2);
    // transform: translate(-50%, -50%);
    transform: scale(0,0);
    opacity: 0;
    padding-top: 200rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .close {
      position: absolute;
      top: 130rpx;
      right: 32rpx;
      width: 48rpx;
      height: 48rpx;
      // background-color: red;
    }

    .coupon-min {
      width: 536rpx;
      height: 134rpx;
      // border: 1px solid red;
      
    }
    .screen-img{
      width: 524rpx;
height: 220rpx;
    }
    .p1 {
      width: 100%;
      color: #333333;
      font-size: 36rpx;
      font-weight: 400;
      text-align: center;
      .sub{
        font-weight: 700;
        letter-spacing: 4rpx;
        color: #FC3A35;
      }
    }
    .p2{
      color: #666666;
      font-size: 28rpx;
    }
    .sure{
      background-image: url(https://static.joymew.com/joymew-assist/pttq/tips/sure.png);
      background-size: 100% 100%;
      width: 331rpx;
      height: 84rpx;
      font-size: 36rpx;
      color: #fefefe;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tips{
      color:#999999;
      font-size: 24rpx;
    }

  }
}

.box-in-animate {
  animation-delay: 0s;
  animation-duration: 0.2s;
  animation-name: flyIn;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
.box-out-animate {
  animation-delay: 0s;
  animation-duration: 0.2s;
  animation-name: flyOut;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes mysteriousHbOut {
  0% {
    transform: scale(1) ;
    opacity: 1;
  }

  50% {
    transform: scale(0.5);
    opacity: 0.5;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}